<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02盒模型</title>
</head>
<style>
    .box1{
        /* 
            内容区(centent)元素中的所有子元素和文本内容都在内容区中排列
                内容区大小由width和height属性设置
         */
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* 
        边框（border）属于盒子边缘，里面属于盒子内部，外面属于盒子外部
            边框大小会影响盒子大小
        设置边框需要同时有下面三个样式：
            边框宽度 border-width
            边框颜色 border-color
            边框样式 border-style
    */
    border-width: 10px;
    border-color: red;
    border-style: solid;
    }
    
    
</style>
<body>
    <!-- 
        盒模型，盒子模型，框模型（box model）：
            -css将页面中的所有元素都设置为矩形盒子
            -将元素设置为矩形盒子，对页面的布局就变成摆放不同的盒子到不同位置
            -每一个盒子的组成：
                --内容区(content)
                --内边距(padding)
                --边框(border)
                --外边距(margin)
     -->
    
     <div class="box1"></div>

</body>
</html>